<!-- 充值 -->
<template>
<div class="box">
     <div class="title">
      <span>选择充值金额</span>
    </div>
    <div class="container">
        <div class="item" v-for="(item,index) in rechargearr" :key="index"><span @click="rechargebtn(item.money)" :class="{active:active == item.money}">{{item.money}}</span></div>
        <div class="item"><input v-model="moneyvals" @input="moneyvalchange(moneyvals)" type="number" placeholder="自定义金额"></div>
        <div class="confirmbox">
            <div class="tip">可增加{{(moneyval*10000/limitRatio*limitMul/100).toFixed(2)}}限额</div>
            <div>
                <el-button class="okbtn" type="primary"  @click="recharge">确定</el-button>
            </div>
        </div>
    </div>


      <!-- 扫码支付 -->
      <el-dialog v-dialogDrag title="扫码支付" :visible.sync="visible" width="70%"  :close-on-click-modal = "false" :before-close="close">
        <div v-if="awaits" class="dialogbox">
            <div>扫描下方二维码完成支付</div>
            <div id="qrcode"></div>
            <div>倒计时（<span class="blue">{{count}}</span>s）</div>
        </div>
        <div v-if="succeed" class="succeedbox">
            <div><img src="../../assets/img/ok.png" alt=""></div>
            <div>支付成功！</div>
        </div>
     
      </el-dialog>
</div>
 
</template>

<script>
import {recharge,chargeOrderQuery} from "@/api/api";
import $ from "jquery";
var QRCode = require('qrcode')
export default {
  data () {
    return {
        rechargearr:[
            {money:'100'},
             {money:'200'},
             {money:'300'},
             {money:'400'},
             {money:'500'},
             {money:'1000'},
             {money:'2000'},
            ],
            active:'100',
            moneyval:'100',
            moneyvals:'',
            limit:'',
            visible:false,
            instNo:'',
            limitMul:'',
            limitRatio:'',
            count:"",
            timer: null,
            time:'',
            chargeOrder:'',
            awaits:true,
            succeed:false,

    };
  },
  created() {
      this.instNo = sessionStorage.getItem('instNos');
      this.limitMul = Number(sessionStorage.getItem('limitMul'));
      this.limitRatio = Number(sessionStorage.getItem('limitRatio'));
      console.log(this.instNo)
  },
  destroyed(){
      clearInterval(this.chargeOrder);
  },
  methods:{
      rechargebtn(e){
          this.active = e
          this.moneyval = e
      },
      moneyvalchange(e){
          this.active = ''
          this.moneyval = e
          this.moneyvals = e
          console.log(123)
      },
       // 充值
    recharge(){
        this.time = Date.parse(new Date())
        let that = this
        console.log(this.moneyval*10000/this.limitRatio*this.limitMul/100)
        console.log( this.$store.state.url +'/openpay/inst/recharge?instNo='+ this.instNo +'&amount='+ this.moneyval +'&payTime='+that.time+'')
     $('#qrcode').html('')
     this.visible = true
     setTimeout(function(){
         QRCode.toDataURL( that.$store.state.url +'/openpay/inst/recharge?instNo='+ that.instNo +'&amount='+ that.moneyval +'&payTime='+that.time+'')
            .then(url => {
            var qrbox = document.querySelector("#qrcode");
            const img = new Image();
            img.src=url;
            qrbox.appendChild(img);
            })
            .catch(err => {
              console.error(err)
            })
     },500)
     that.getCode()


    },
    // 倒计时
    getCode(){
        const TIME_COUNT = 120;
        if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            } else {
            clearInterval(this.timer);
            this.timer = null;
            }
        }, 1000)
        }
        this.chargeOrder = setInterval(() => {
            if(this.count > 0 && this.count <= TIME_COUNT){
                chargeOrderQuery({
                    instNo:this.instNo,
                    payTime: this.time
                    }).then(res => {
                    console.log(res);
                    if(res.code == 405){
                        sessionStorage. removeItem('token')
                        this.$router.push('/login');
                    }else if(res.code == 200){
                        this.awaits = false
                        this.succeed= true
                        clearInterval(this.chargeOrder);
                         this.$router.push({
                            path: "/userinfo",
                        });
                        setTimeout(function(){that.$router.go(0)},2000)
                    }
                });
            }else{
                 clearInterval(this.chargeOrder);
                  this.$message.error('充值失败');
                  this.visible = false
            }
          

        }, 3000)
       
    },
    close(){
         clearInterval(this.chargeOrder);
         clearInterval(this.timer);
         this.visible = false
         
    } 
  }

  
}

</script>
<style lang='less' scoped>
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container{
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .item{
      width: 25%;
      text-align: center;
      line-height: 300%;
      span{
        border: 1px solid rgba(15, 15, 15,20%);
        background: #f0f0f0;
        width: 160px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border-radius:5px;
        color: #888888;
      }
      input{
        text-align: center;
        border: 1px solid rgba(15, 15, 15,20%);
        background: #f0f0f0;
        width: 160px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border-radius:5px;
        color: #888888;
        font-size: 16px;
      }
      .active{
          color: #2E71D9;
          background: #EBF1FA;
          border: 1px solid #D9E4F6;
      }
  }
}
.confirmbox{
    margin-top: 50px;
    border-top: 1px solid #EEEEEE;
    width: 100%;
    text-align: center;
    padding-top: 20px;
    color: #2E71D9;
    font-size: 13px;
    .okbtn{
        width: 250px;
        margin-top: 15px;
    }
}
.dialogbox{
    width: 100%;
    text-align: center;
}
.succeedbox{
    width: 100%;
    text-align: center;
}
.blue{
    color: #2E71D9;
}
</style>